<style lang="scss">
	@import '@/assets/css/variable';

	.study {
		background-color: $main-bgc-gray;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: absolute;
		overflow:hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.total{
			padding: 1.6rem 1.6rem 0 1.6rem;
			color: $color2;
		}
		.timeBox{
			display: flex;
			height: 50px;
			align-items: center;
			// justify-content: space-around;
			background-color: white;
			color: $color3;
			border-bottom: 1px solid #e9e9e9;
			box-shadow: 2px 2px 2px #e7e7e7;
			box-sizing: border-box;
			// background-color: red;
			.time{
				display: flex;
				align-items: center;
				justify-content: center;
				// padding: 1.5rem 1.6rem;
				font-size: 1.4rem;
				margin-left: 1.8rem;
			}
		}
		.list{
			position: absolute;
			top: 48px;
			left: 0;
			right: 0;
			bottom: 0;
			overflow-y: scroll;
			padding: 1rem;
			$paddingSize:0.8rem;
			.item{
				padding-top: $paddingSize;
				background-color: white;
				margin-bottom: 1rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 0.8rem;
				.line1{
					display: flex;
					align-items: center;
					padding: 0 $paddingSize;
					padding-bottom: $paddingSize;
					.imgBox{
						flex: 0 0 8.6rem;
						border-radius: 0.6rem;
						overflow: hidden;
					}
					.content{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 0.6rem;
						height: 5.2rem;
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
						}
						.desc {
							span {
								color: $color2;
								line-height: 1.2em;
								&.split {
									font-size: 1rem;
								}
							}
						}
					}
				}
				.line2{
					&.title{
						color:$color2;
						padding: $paddingSize;
						line-height: 1.3em;
						font-size: 1.3rem;
					}
				}
				.line3{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color:$color2;
					border-top: 1px solid $border-c;
					padding: $paddingSize;
				}
			}
		}
	}
	.van-dropdown-menu{
		.van-dropdown-menu__bar{
			border-bottom: 1px solid #f7f7f7 !important;
			box-shadow: 2px 2px 2px #e7e7e7 !important;
			box-sizing: border-box !important;
		}
	}
</style>
<template>
	<div class="study">
		<!-- <van-dropdown-menu>
		  <van-dropdown-item v-model="value1" :options="option1" @change="dropdownChange"/>
		  <span>时间</span>
		  <van-dropdown-item v-model="value2" :options="option2" />
		</van-dropdown-menu> -->
		<van-action-sheet v-model="showPop" :actions="actions1" @select="onSelect"/>
		<van-popup v-model="showPop2" position="bottom" round :style="{ height: '50%' }">
			<van-datetime-picker
			  v-model="currentDate"
			  type="year-month"
			  title="选择时间"
			  :min-date="minDate"
			  :max-date="maxDate"
			  :formatter="formatter"
			  @confirm="confirm"
			  @cancel="cancel"
			/>
		</van-popup>
		<div class="timeBox">
			<div class="time" @click="showPop=!showPop">
				<span class="text">{{selectType}}</span>
				<span class="margL-m"><van-icon name="arrow-down" /></span>
			</div>
			<div class="time" @click="showPop2=!showPop2">
				<span class="text">{{selectTime}}</span>
				<span class="margL-m"><van-icon name="arrow-down" /></span>
			</div>
		</div>
		<div class="list">
			<van-list
			  v-model="loading"
			  :finished="finished"
			  finished-text="没有更多了"
			  @load="LearningPage"
			  offset="100"
			>
				<div class="item" v-for="item in list" :key="item.id" @click="toDetailView(item)">
					<div class="line1">
						<div class="imgBox">
							<van-image width="8.6rem" height="5.2rem" fit="cover" :src="item.images" />
						</div>
						<div class="content">
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher}}</span>
								<span class="split margL-m">|</span>
								<span class="margL-m">{{item.university}}</span>
							</div>
						</div>
					</div>
					<div class="line3">
						<span>继续学习</span>
						<van-icon name="arrow" class="icon" color="#999" size="1.6rem"/>
					</div>
				</div>
			</van-list>
			<!-- <div class="no-data color-s padding-all-m">已经到底了</div> -->
		</div>		
		<div class="tabbar-height"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	// import ZixunList from '@/components/zixunList.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				minDate: new Date(2021, 0, 1),
				maxDate: new Date(2030, 10, 1),
				currentDate: new Date(),
				showPop:false,
				showPop2:false,
				active: 0,
				mainColor: "#FF0000",
				value1: 0,
				value2: 0,
				selectType:'全部',
				selectTime: '时间',
				actions1: [{ name: '全部', value: 0 }, { name: '线上课程', value: 1 }, { name: '线下课程', value: 2 }],
				option1: [
					{ text: '全部', value: 0 },
					{ text: '线上课程', value: 1 },
					{ text: '线下课程', value: 2 },
				],
				option2: [
					{ text: '时间', value: 0 },
					{ text: '一周内', value: 1 },
					{ text: '一周前', value: 2 }
				],
				tabList: [{
					id: 0,
					name: "课程",
				}, {
					id: 1,
					name: "资讯"
				}],
				list:[],
				courseList: [],
				zixunList:[],
				courseData: '',
				loading: false,
				finished: false,
				pageNo: 1,
				pageSize: 10,
				type_id:'',
				createtime:''
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			// document.title = '活动管理'
			// this.courseList = this.$store.state.courseList
			// this.zixunList = this.$store.state.zixunList
			
			// this.LearningPage()
		},
		methods: {
			confirm(val) {
				console.log(val)
				const ym = this.$utils.parseToDateYM(val)
				this.selectTime = ym // .replace('-','年')+'月'
				this.createtime = ym
				console.log("ym",ym)
				this.showPop2 = false
				this.pageNo = 1
				this.list = []
				this.LearningPage()
			},
			cancel() {
				this.showPop2 = false
			},
			formatter(type, val) {
			  if (type === 'year') {
				return `${val}年`;
			  } else if (type === 'month') {
				return `${val}月`;
			  }
			  return val;
			},
			onSelect(item) {
			  // 默认情况下点击选项时不会自动收起
			  // 可以通过 close-on-click-action 属性开启自动收起
			  this.showPop = false;
			  this.selectType = item.name
			  console.log(item.name,item.value)
			  this.type_id = item.value
			  this.pageNo = 1
			  this.list = []
			  this.LearningPage()
			},
			toDetailView(item) {
				console.log(item)
				if(item.type==2){
					this.$router.push(`/course/detail4xx?id=${item.course_id}&type=${item.type}`)
				}else{
					this.$router.push(`/course/detail4xs?id=${item.course_id}&type=${item.type}`)
				}
			},
			dropdownChange(index) {
				this.value1 = index
				console.log("value1", index)
				this.type_id = index
				this.pageNo1 = 1
				this.list = []
				this.LearningPage()
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
				} else if (index == 1) {
					//线下课程
				} else if (index == 2) {
					//在线学习
				}
			},
			LearningPage() {
				const _this = this;
				let params = {
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id,
					createtime:this.createtime,
					type_id: this.type_id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				this.loading = true
				_this.$request.LearningPage(params).then(res => {
					let list = this.list
					//_this.list = data
					list.push(...res.data.data)
					_this.list = list
					console.log(_this.list.length)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
					this.loading = false
				})
			},
		}
	};
</script>
